<template>
    <div class="kline_detail_page">
        <div class="content">
            <div class="detail_title">
                <div class="ti_cont">
                    <div class="top_back">
                        <div class="left_back" @click="handleBack()">
                            <img src="../../assets/img/zuojiantou.png" alt/>
                        </div>
                        <div class="right_title">
                            <div class="t_t" style="white-space: nowrap;">
                                <span>{{ kLineDetails.name | getName }}</span>
                            </div>
                            <div class="b_t">
                                <span>{{ singDetails.code }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="right_money sss">
                        <div class="content_money">
                            <div class="top_price">
                                <div class="left" v-if="isMarketClosed === null">
                                        <span class="closed text">查询中</span>
                                </div>
                                <div v-else class="left">
                                    <span class="closed text"
                                          v-if="isMarketClosed">已休市</span>
                                    <span class="open text" v-else>交易中</span>
                                </div>
                                <div class="right">
                                    <!-- <span v-if="$store.state.userInfo.userAmt == undefined">¥0.00</span>
                                    <span v-if="$store.state.userInfo && kLineDetails.if_zhishu != '0'"
                                        style="white-space: nowarp;">
                                        {{
                                            kLineDetails.if_us == 1 ? '$' + Number(Number($store.state.userInfo.userIndexAmt) /
                                                7.1).toFixed(2) :
                                            kLineDetails.if_us == 2 ? 'HK$' + (Number($store.state.userInfo.userIndexAmt) /
                                                0.9).toFixed(2) :
                                                '¥' +
                                                $store.state.userInfo.userIndexAmt
                                        }}
                                    </span>
                                    <span v-if="$store.state.userInfo.userAmt != undefined && kLineDetails.if_zhishu == '0'"
                                        style="white-space: nowarp;">
                                        {{
                                            kLineDetails.if_us == 1 ? '$' + Number(Number($store.state.userInfo.userAmt) /
                                                7.1).toFixed(2) :
                                            kLineDetails.if_us == 2 ? 'HK$' + (Number($store.state.userInfo.userAmt) /
                                                0.9).toFixed(2) : '¥ ' +
                                            $store.state.userInfo.userAmt
                                        }}
                                    </span> -->
                                    <div class="market-indicator">
                                        <div>
                                            {{ getNextOpenTime() }}
                                        </div>
                                    </div>

                                </div>
                                <div class="sanjiao">
                                    <!-- <img
                    :class="dialogFlag ? 'xuanz' : ''"
                    style="transition: all 0.5s;"
                    src="../../assets/img/xiala.png"
                    alt
                  /> -->
                                </div>
                            </div>
                            <div class="bottom_balance">
                                <div>
                                    <!-- <span>{{ $t('hj48') }}</span> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="real_time_detail">
                    <div class="left_now_price">
                        <div class="top_now">
                            <span
                                :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'price green' : 'price red'">{{
                                    Number(singDetails.nowPrice).toFixed(1)

                                }}</span>
                        </div>
                        <div class="bottom_now">
                            <div>
                                <span v-if="singDetails.nowPrice == 0">-</span>
                                <span v-else>{{
                                        singDetails.nowPrice - singDetails.preclose_px > 0
                                            ? '+' : ''
                                    }}{{ (singDetails.nowPrice - singDetails.preclose_px).toFixed(2) }}</span>
                            </div>
                            <div class="tew"
                                 :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">
                                <span v-if="singDetails.nowPrice == 0">-</span>
                                <span v-else>({{ singDetails.nowPrice - singDetails.preclose_px > 0 ? '+' : '' }}
                                    {{ singDetails.hcrate ? singDetails.hcrate : '0' }}%)</span>
                            </div>
                        </div>
                    </div>
                    <div class="right_ets">
                        <div class="tops">
                            <div class="lefts topes">
                                <span class="titles">{{ $t('hj72') }}</span>
                                <span
                                    :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                                        singDetails.open_px
                                    }}</span>
                            </div>
                            <div class="rights topes">
                                <span class="titles">{{ $t('hj73') }}</span>
                                <span
                                    :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                                        singDetails.today_max
                                    }}</span>
                            </div>
                        </div>
                        <div class="bottoms">
                            <div class="lefts bots">
                                <span class="titles">{{ $t('hj74') }}</span>
                                <span
                                    :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                                        singDetails.preclose_px
                                    }}</span>
                            </div>
                            <div class="rights bots">
                                <span class="titles">{{ $t('hj75') }}</span>
                                <span
                                    :class="singDetails.nowPrice - singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{
                                        singDetails.today_min
                                    }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="k_line_detail">
                <Kline :type="singDetails.type"/>
            </div>


            <div class="zdy_tabs">
                <div class="zdy_box">
                    <div class="item" :class="flag == 1 ? 'sel' : ''" @click="ZZtabs(1)">交易</div>
                    <div class="item" :class="flag == 2 ? 'sel' : ''" @click="ZZtabs(2)">持仓</div>
                    <div class="item" :class="flag == 3 ? 'sel' : ''" @click="ZZtabs(3)">详情</div>
                </div>
            </div>

            <template v-if="flag == 1">
                <div class="bottom-container">
                    <div class="zdy_t1">
                        <div class="col">
                            <div class="item">
                                <div class="zdy_jt">
                                    <img src="static/img/icon1.svg">
                                    <span> {{ getCurrentBuyPostionsCount() }}</span>
                                </div>
                                <span class="earn" :class="getCurrentBuyPostionsEarn() <= 0 ? 'green' : 'red'">
                                    {{ getCurrentBuyPostionsEarn() }}
                                </span>
                                <button :class="canCloseBuy() ? 'sel' : ''" v-if="!isLoading"
                                        @click="() => { if (!canCloseBuy()) return; playSound(); closeAllPosDirection = 1; closeAllModal = true; }">
                                    市价全平
                                </button>
                                <button v-else>
                                    处理中...
                                </button>
                            </div>
                        </div>
                        <div class=" col">
                            <div class="item">
                                <div class="zdy_jt">
                                    <img src="static/img/icon2.svg">
                                    <span> {{ getCurrentSellPostionsCount() }}</span>
                                </div>
                                <span class="earn" :class="getCurrentSellPostionsEarn() <= 0 ? 'green' : 'red'">
                                    {{ getCurrentSellPostionsEarn() }}
                                </span>
                                <button :class="canCloseSell() ? 'sel' : ''" v-if="!isLoading"
                                        @click="() => { if (!canCloseSell()) return; playSound(); closeAllPosDirection = 2; closeAllModal = true; }">
                                    市价全平
                                </button>
                                <button v-else>
                                    处理中...
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="zdy_t2">
                        <div class="left">
                            <div class="zdy_row">
                                <button class="s_btn k1">
                                    市价
                                </button>
                                <div class="zdy_stepper">
                                    <button class="s_btn" disabled>
                                        <img src="static/img/icon3.svg"/>
                                    </button>
                                    <input value="市价" disabled>
                                    <button class="s_btn" disabled>
                                        <img src="static/img/icon4.svg"/>
                                    </button>
                                </div>
                            </div>
                            <!--              <div class="zdy_row" v-else>-->
                            <!--                <button class="s_btn k1" @click="show1 = !show1">-->
                            <!--                  限价-->
                            <!--                  <img class="bq" src="static/img/icon5.svg"/>-->
                            <!--                </button>-->
                            <!--                <div class="zdy_stepper">-->
                            <!--                  <button class="s_btn" @click="decrement">-->
                            <!--                    <img src="static/img/icon3.svg"/>-->
                            <!--                  </button>-->
                            <!--                  <input type="number" v-model="quantity">-->
                            <!--                  <button class="s_btn" @click="increment">-->
                            <!--                    <img src="static/img/icon4.svg"/>-->
                            <!--                  </button>-->
                            <!--                </div>-->
                            <!--              </div>-->

                            <div class="zdy_row">
                                <button class="s_btn k1">数量</button>
                                <div class="zdy_stepper">
                                    <button class="s_btn" @click="decrement">
                                        <img src="static/img/icon3.svg"/>
                                    </button>
                                    <input type="number" v-model="quantity">
                                    <button class="s_btn" @click="increment">
                                        <img src="static/img/icon4.svg"/>
                                    </button>
                                </div>
                            </div>


                            <div class="zdy_row">
                                <button class="s_btn k1" @click="openPopup3">盈损</button>
                                <div class="zdy_stepper v2">
                                    <div class="w-50">
                                        <button class="s_btn" @click="showProfit = true">
                                            {{ profitValue }}<img class="bq" src="static/img/icon5.svg"/>
                                        </button>
                                    </div>
                                    <div class="w-50">
                                        <button class="s_btn" @click="showLoss = true">
                                            {{ lossValue }} <img class="bq" src="static/img/icon5.svg"/>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <div class="zdy_jt" @click="buyingPosDirection = 1; openBuyPopup();">
                                <img src="static/img/icon1.svg">
                                <span>买涨</span>
                            </div>
                            <div class="zdy_jt" @click="buyingPosDirection = 2; openBuyPopup();">
                                <img src="static/img/icon2.svg">
                                <span>买跌</span>
                            </div>
                        </div>
                    </div>
                    <div class="zdy_t3">
                        <div class="z_col">
                            资金账号: {{ userInfo.phone }}
                        </div>
                        <div class="z_col">
                            可用资金: {{ userInfo.enableFuturesAmt }}
                        </div>
                        <div class="z_col">
                            今日平仓盈亏: <span :class=" todayClosedPositionsEarn <= 0 ? 'green' : 'red'">{{
                                todayClosedPositionsEarn
                            }}</span>
                        </div>
                        <div class="z_col">
                            最大可下手数: {{ settings.buyMaxNum }}
                        </div>
                    </div>
                </div>
            </template>
            <!-- 持仓信息 -->
            <template v-else-if="flag == 2">
                <div class="bottom-container">
                    <div class="zdy_t4">
                        <div class="item" :class="t4 == 1 ? 'sel' : ''" @click="t4tabs(1)">持仓</div>
                        <!--          <div class="item" :class="t4==2?'sel':''" @click="t4tabs(2)">委托</div>-->
                        <div class="item" :class="t4 == 3 ? 'sel' : ''" @click="t4tabs(3)">成交</div>
                        <div class="item" :class="t4 == 4 ? 'sel' : ''" @click="t4tabs(4)">止盈止损</div>
                        <div class="item" :class="t4 == 5 ? 'sel' : ''" @click="t4tabs(5)">资金</div>
                    </div>
                    <div class="zdy_t5" v-if="t4 == 1">

                        <table>
                            <tr>
                                <th>合约</th>
                                <th class="text-center">持仓量</th>
                                <th class="text-center">开仓均价</th>
                                <th class="text-center">浮动盈亏</th>
                                <th class="text-right">操作</th>
                            </tr>
                            <tr v-for=" i in postions " :key="i.id">
                                <td> {{ i.stockName }}</td>
                                <td class="text-center">
                                    <div class="zdy_jt">
                                        <img
                                            :src="i.orderDirection === '买涨' ? 'static/img/icon1.svg' : 'static/img/icon2.svg'">
                                        <span>{{ i.orderNum }}</span>
                                    </div>
                                </td>
                                <td class="text-center">{{ i.buyOrderPrice }}</td>
                                <td class="text-center">
                                    <span :style="{ color: i.profitAndLose < 0 ? '#42a02e' : '#d74a39' }">{{
                                            i.profitAndLose
                                        }}</span>
                                </td>
                                <td class="text-right">
                                    <div class="box_btn">
                                        <!--                  <button @click="openPopup5">反手</button>-->
                                        <!--                                        <button @click="openPopup4">盈损</button>-->
                                        <button @click="closePos(i)">平仓</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>合计</td>
                                <td class="text-center">
                                    {{ postions.length }}
                                </td>
                                <td class="text-center"></td>
                                <td class="text-center">
                                    <span :style="{ color: getAvaliablePostionsTotal() < 0 ? '#42a02e' : '#d74a39' }">
                                        {{ getAvaliablePostionsTotal() }}
                                    </span>
                                </td>
                                <td class="text-right">
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="zdy_t5" v-else-if="t4 == 2">
                        <table>
                            <tr>
                                <th>合约</th>
                                <th class="text-center">开平</th>
                                <th class="text-right">委托价</th>
                                <th class="text-center">委托量</th>
                                <th class="text-right">委托状态</th>
                                <th class="text-right">操作</th>
                            </tr>
                        </table>
                    </div>
                    <!-- 成交仓位 -->
                    <div class="zdy_t5" v-else-if="t4 == 3">
                        <div style="overflow: auto;width: 100%">
                            <table>
                                <tr>
                                    <th>合约</th>
                                    <th class="text-center">开平</th>
                                    <th class="text-center">成交价</th>
                                    <th class="text-center">成交量</th>
                                    <th class="text-center">盈亏</th>
                                    <th class="text-center">开仓时间</th>
                                    <th class="text-center">成交时间</th>
                                    <th class="text-right">手续费</th>
                                </tr>
                                <tr v-for=" i  in  closedPositions " :key="i.id">
                                    <td>{{ i.stockName }}</td>
                                    <td class="text-center"
                                        :style="{ color: i.orderDirection !== '买涨' ? '#42a02e' : '#d74a39' }">
                                        {{ i.orderDirection === '买涨' ? '买平' : '卖平' }}
                                    </td>
                                    <td class="text-center">{{ i.sellOrderPrice || i.buyOrderPrice }}</td>
                                    <td class="text-center">{{ i.orderNum }}</td>
                                    <td class="text-center"
                                        :style="{ color: i.profitAndLose < 0 ? '#42a02e' : '#d74a39' }">
                                        {{ i.profitAndLose }}
                                    </td>
                                    <td class="text-center">
                                        {{
                                            new Date(i.buyOrderTime).toLocaleTimeString()
                                        }}
                                    </td>
                                    <td class="text-center">{{
                                            new Date(i.sellOrderTime).toLocaleTimeString()
                                        }}
                                    </td>


                                    <td class="text-right">{{ i.orderFee }}</td>
                                </tr>
                            </table>
                        </div>


                    </div>
                    <div class="zdy_t5" v-else-if="t4 == 4">
                        <table>
                            <tr>
                                <th>合约</th>
                                <th class="text-center">持仓量</th>
                                <th class="text-center">止盈价</th>
                                <th class="text-center">止损价</th>
                                <th class="text-center">状态</th>
                                <th class="text-right">操作</th>
                            </tr>
                            <tr v-for="item in monitoringPos" :key="item.id">
                                <td>{{ item.futuresName }}</td>
                                <td class="text-center">
                                    <div class="zdy_jt">
                                        <img v-if="item.orderDirection == '买涨'" src="static/img/icon1.svg">
                                        <img v-if="item.orderDirection == '买跌'" src="static/img/icon2.svg">
                                        <span>{{ item.orderNum }}</span>
                                    </div>
                                </td>
                                <td class="text-center">

                                    <span v-if="item.profitTargetPrice">{{ item.profitTargetPrice }}</span>
                                    <span v-else>未设置</span>
                                </td>
                                <td class="text-center">
                  <span v-if="item.stopTargetPrice">
                  {{ item.stopTargetPrice }}

                  </span>
                                    <span v-else>
                     未设置
                  </span>
                                </td>
                                <td class="text-center">
                                    {{ item.triggerStop }}
                                </td>
                                <td class="text-right">
                                    <div class="box_btn" style="justify-content: flex-end">
                                        <button v-if="item.triggerStop === '监控中'" class="sel"
                                                @click="editCurrentMonitoringPos(item)">
                                            修改
                                        </button>
                                        <button v-else style="background: #8c8c8c">修改</button>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="zdy_t5" v-else>
                        <div class="zdy_t6">
                            <div class="r1">
                                <div class="text1">资金账户: {{ userInfo.phone }}</div>
                            </div>
                            <div class="r2">
                                <div>
                                    <p class="text2">总资金</p>
                                    <p class="text3">{{ userInfo.allFuturesFreezAmt + userInfo.enableFuturesAmt }}</p>
                                </div>
                                <div>
                                    <p class="text2">可用资金</p>
                                    <p class="text3">{{ userInfo.enableFuturesAmt }}</p>
                                </div>
                            </div>
                            <div class="r3">
                                <!--              <div>-->
                                <!--                <p class="text2">盯市盈亏 <img src="static/img/icon6.svg"/></p>-->
                                <!--                <p class="text3">0.00</p>-->
                                <!--              </div>-->
                                <div>
                                    <p class="text2">平仓盈亏</p>
                                    <p class="text3"
                                       :style="{ color: closedPositionsEarn <= 0 ? '#42a02e' : '#d74a39' }">{{
                                            closedPositionsEarn
                                        }}</p>
                                </div>
                                <div>
                                    <p class="text2">冻结保证金</p>
                                    <p class="text3"> {{ userInfo.allFuturesFreezAmt }}
                                    </p>
                                </div>
                                <div>
                                    <p class="text2">当日参考盈亏</p>
                                    <p class="text3"
                                       :style="{ color: todayClosedPositionsEarn < 0 ? '#42a02e' : '#d74a39' }">{{
                                            todayClosedPositionsEarn
                                        }}</p>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template v-else-if="flag == 3">
                <div class="priect_top_bottom bottom-container"
                     v-if="(kLineDetails.if_us != 1 && kLineDetails.type != 'hk') && kLineDetails.type != 'hk' && kLineDetails.if_zhishu == 0">
                    <div class="t_title">
                        <span>{{ $t('hj76') }}</span>
                    </div>
                    <div class="charts">
                        <div class="left_s">
                            <div class="t_ma">
                                <span>{{ $t('hj77') }}</span>
                            </div>
                            <div class="ets">
                                <div class="left_sell1">
                                    <span>{{ singDetails.sell1 }}</span>
                                </div>
                                <div class="right_sell1">
                                    <span>{{ singDetails.sell1_num }}</span>
                                </div>
                            </div>
                            <div class="ets">
                                <div class="left_sell1">
                                    <span>{{ singDetails.sell2 }}</span>
                                </div>
                                <div class="right_sell1">
                                    <span>{{ singDetails.sell2_num }}</span>
                                </div>
                            </div>
                            <div class="ets">
                                <div class="left_sell1">
                                    <span>{{ singDetails.sell3 }}</span>
                                </div>
                                <div class="right_sell1">
                                    <span>{{ singDetails.sell3_num }}</span>
                                </div>
                            </div>
                            <div class="ets">
                                <div class="left_sell1">
                                    <span>{{ singDetails.sell4 }}</span>
                                </div>
                                <div class="right_sell1">
                                    <span>{{ singDetails.sell4_num }}</span>
                                </div>
                            </div>
                            <div class="ets">
                                <div class="left_sell1">
                                    <span>{{ singDetails.sell5 }}</span>
                                </div>
                                <div class="right_sell1">
                                    <span>{{ singDetails.sell5_num }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="right_h">
                            <div class="t_ma">
                                <span>{{ $t('hj78') }}</span>
                            </div>
                            <div class="ets">
                                <div class="left_sell1">
                                    <span>{{ singDetails.buy1 }}</span>
                                </div>
                                <div class="right_sell1">
                                    <span>{{ singDetails.buy1_num }}</span>
                                </div>
                            </div>
                            <div class="ets">
                                <div class="left_sell1">
                                    <span>{{ singDetails.buy2 }}</span>
                                </div>
                                <div class="right_sell1">
                                    <span>{{ singDetails.buy2_num }}</span>
                                </div>
                            </div>
                            <div class="ets">
                                <div class="left_sell1">
                                    <span>{{ singDetails.buy3 }}</span>
                                </div>
                                <div class="right_sell1">
                                    <span>{{ singDetails.buy3_num }}</span>
                                </div>
                            </div>
                            <div class="ets">
                                <div class="left_sell1">
                                    <span>{{ singDetails.buy4 }}</span>
                                </div>
                                <div class="right_sell1">
                                    <span>{{ singDetails.buy4_num }}</span>


                                </div>
                            </div>
                            <div class="ets">
                                <div class="left_sell1">
                                    <span>{{ singDetails.buy5 }}</span>
                                </div>
                                <div class="right_sell1">
                                    <span>{{ singDetails.buy5_num }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="priect_top_bottom" v-if="kLineDetails.if_us == 1">
                    <div class="t_title">
                        <span>{{ $t('hj79') }}</span>
                    </div>
                    <div class="charts">
                        <div class="left_s">
                            <div class="t_ma">
                                <span>{{ $t('hj80') }}</span>
                            </div>
                            <div class="ets" v-for=" item  in  timedata.data.details ">
                                <div class="left_sell1">
                                    <span>{{ item.split(',')[0] }}</span>
                                </div>
                                <div class="right_sell1">
                                    <span>{{ }}</span>
                                </div>
                            </div>

                        </div>
                        <div class="right_h">
                            <div class="t_ma">
                                <span>{{ $t('hj81') }}</span>
                            </div>
                            <div class="ets" v-for=" item  in  timedata.data.details ">
                                <div class="left_sell1">
                                    <span>{{ item.split(',')[1] }}</span>
                                </div>
                                <div class="right_sell1">
                                    <span>{{ }}</span>
                                </div>
                            </div>

                        </div>
                        <div class="right_h">
                            <div class="t_ma">
                                <span>{{ $t('hj82') }}</span>
                            </div>
                            <div class="ets" v-for=" item  in  timedata.data.details ">
                                <div class="left_sell1">
                                    <span>{{ item.split(',')[2] }}</span>
                                </div>
                                <div class="right_sell1">
                                    <span>{{ }}</span>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- <div class="jianjie" v-if="!(kLineDetails.if_zhishu != '0' && singDetails.gid.indexOf('hk') > -1)"
                    :class="acseFlag ? 'isjj' : ''" ref="isjj" id="isjj">
                    <div class="top_jj">
                        <span>{{ $t('hj83') }}</span>
                    </div>
                    <div class="jet">
                        <span>{{ jianjie }}</span>
                    </div>
                </div> -->
                <div class="hknews" v-if="kLineDetails.if_zhishu != '0' && singDetails.gid.indexOf('hk') > -1">

                    <div class="news-tab">
                        <div class="t_title">
                            <span>{{ $t('hj6') }}</span>
                        </div>
                        <mt-tab-container v-model="news" :swipeable="false" style="padding-top: 0.5rem;">
                            <mt-tab-container-item id="tab_2">
                                <div class="news-content">
                                    <div class="item-out" v-for="( item, inde ) in  newsdetailList " :key="inde">
                                        <div class="item-times">{{ item.Art_ShowTime | utc2beijing }}</div>
                                        <div class="titContent" style="-webkit-box-orient: vertical;">{{
                                                item.Art_Title
                                            }}
                                        </div>
                                    </div>
                                </div>
                            </mt-tab-container-item>
                        </mt-tab-container>
                    </div>
                </div>
                <div class="hknews" v-else>
                    <div class="news-tab">
                        <div class="t_title">
                            <span>{{ $t('hj6') }}</span>
                        </div>
                        <mt-tab-container v-model="news" :swipeable="false" style="padding-top: 0.5rem;">
                            <mt-tab-container-item id="tab_2">
                                <div class="news-content">
                                    <div class="item-out" v-for="( item, inde ) in  newsdetailList " :key="inde">
                                        <div class="item-times">{{ item.addTime | gettime }}</div>
                                        <div class="titContent" style="-webkit-box-orient: vertical;">{{
                                                item.title
                                            }}
                                        </div>
                                    </div>
                                </div>
                            </mt-tab-container-item>
                        </mt-tab-container>
                    </div>
                </div>
            </template>
            <template v-else>4</template>
            <!--交易、持仓静态页-->

            <!--委托开仓弹窗-->
            <mt-popup v-model="popupVisible" position="bottom">
                <div class="popup_box">
                    <div class="title">
                        <span>委托开仓</span>
                        <span class="close" @click="closePopup">取消</span>
                    </div>
                    <div class="body">
                        <div class="zdy_p1">
                            <div class="z_col">合约：<span>{{ singDetails.code }}</span></div>
                            <div class="z_col">开平：
                                <span v-if="buyingPosDirection === 1">买开</span>
                                <span v-if="buyingPosDirection === 2">卖开</span>

                            </div>
                            <div class="z_col">价格：<span>市价（涨跌停价）</span></div>
                            <div class="z_col">数量：
                                <span>
                                    {{ quantity }}
                                    手</span>
                            </div>
                            <div class="z_col">
                                止盈：<span v-if="profitValue !== '止盈'">{{ profitValue }}</span>
                                <span v-else>无</span>
                            </div>
                            <div class="z_col">
                                止损：<span v-if="lossValue !== '止损'">{{ lossValue }}</span>
                                <span v-else>无</span>
                            </div>
                        </div>
                        <div class="zdy_p2">
                            <img src="static/img/icon6.svg"/>
                            <span>止盈止损设置仅当天有效，请注意持仓风险！</span>
                        </div>
                    </div>
                    <div class="p_box_btn">
                        <div class="z-col">
                            <button @click="openPos" v-if="!isLoading">开仓</button>
                            <button class="disabled-btn" v-else>处理中...</button>

                        </div>
                    </div>
                </div>
            </mt-popup>
            <!--委托平仓弹窗-->
            <mt-popup v-model="closeOnePopup" position="bottom">
                <div class="popup_box">
                    <div class="title">
                        <span>委托平仓</span>
                        <span class="close" @click="closePopup2">取消</span>
                    </div>
                    <div class="body">
                        <div class="zdy_p1">
                            <div class="z_col">
                                合约：<span> {{ getCurrentPosCode() }}</span>
                                <div class="zdy_t2">
                                    <div class="left">
                                        <div class="zdy_row">
                                            <button class="s_btn k1">
                                                市价
                                                <img class="bq" src="static/img/icon5.svg"/>
                                            </button>
                                            <div class="zdy_stepper">
                                                <button class="s_btn" disabled>
                                                    <img src="static/img/icon3.svg"/>
                                                </button>
                                                <input value="市价">
                                                <button class="s_btn" disabled>
                                                    <img src="static/img/icon4.svg"/>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="z_col">
                                开平：<span v-if="currentPos.orderDirection === '买涨'">买平</span>
                                <span v-if="currentPos.orderDirection === '买跌'">卖平</span>
                                <div class="zdy_t2">
                                    <div class="left">
                                        <div class="zdy_row">
                                            <button class="s_btn k1" style="background: #fff">数量</button>
                                            <div class="zdy_stepper">
                                                <button class="s_btn" @click="decrement">
                                                    <img src="static/img/icon3.svg"/>
                                                </button>
                                                <input type="number" :value="currentPos.orderNum">
                                                <button class="s_btn" @click="increment">
                                                    <img src="static/img/icon4.svg"/>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="zdy_p2">
                            <img src="static/img/icon6.svg"/>
                            <span>止盈止损设置仅当天有效，请注意持仓风险！</span>
                        </div>
                    </div>
                    <div class="p_box_btn">
                        <div class="z-col">
                            <button @click="closeCurrentPos" v-if="!isLoading">平仓</button>
                            <button class="disabled-btn" v-else>处理中...</button>


                        </div>
                    </div>
                </div>
            </mt-popup>
            <!-- 市价全平 -->
            <mt-popup v-model="closeAllModal" position="bottom">
                <div class="popup_box">
                    <div class="title">
                        <span>市价全平</span>
                        <span class="close" @click="closeAllModal = false">取消</span>
                    </div>
                    <div class="body">
                        <div class="zdy_p1">
                            <div class="z_col">
                                合约：<span>{{ singDetails.code }}</span>
                                <div class="zdy_t2">
                                    <div class="left">
                                        <div class="zdy_row">
                                            <button class="s_btn k1">
                                                市价
                                                <img class="bq" src="static/img/icon5.svg"/>
                                            </button>
                                            <div class="zdy_stepper">
                                                <button class="s_btn" disabled>
                                                    <img src="static/img/icon3.svg"/>
                                                </button>
                                                <input value="市价">
                                                <button class="s_btn" disabled>
                                                    <img src="static/img/icon4.svg"/>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="z_col">
                                开平：<span v-if="closeAllPosDirection === 1">
                                    买平
                                </span>
                                <span v-if="closeAllPosDirection === 2">
                                    卖平
                                </span>
                                <div class="zdy_t2">
                                    <div class="left">
                                        <div class="zdy_row">
                                            <button class="s_btn k1" style="background: #fff">数量</button>
                                            <div class="zdy_stepper">
                                                <button class="s_btn" @click="decrement">
                                                    <img src="static/img/icon3.svg"/>
                                                </button>
                                                <input type="number" :value="getNeedClosePosCount()">
                                                <button class="s_btn" @click="increment">
                                                    <img src="static/img/icon4.svg"/>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="zdy_p2">
                            <img src="static/img/icon6.svg"/>
                            <span>止盈止损设置仅当天有效，请注意持仓风险！</span>
                        </div>
                    </div>
                    <div class="p_box_btn">
                        <div class="z-col">
                            <button @click="closeAllPos" v-if="!isLoading">平仓</button>
                            <button class="disabled-btn" v-else>处理中...</button>


                        </div>
                    </div>
                </div>
            </mt-popup>

            <mt-popup v-model="popupVisible5" position="bottom">
                <div class="popup_box">
                    <div class="title">
                        <span>反手</span>
                        <span class="close" @click="closePopup5">取消</span>
                    </div>
                    <div class="body">
                        <div class="zdy_p3">
                            <van-row>
                                <van-col span="12">
                                    <div class="r1">
                                        <div class="text">反手手数</div>
                                        2
                                    </div>
                                </van-col>
                                <van-col span="12">
                                    <div class="r1">
                                        <div class="text">交易方向</div>
                                        多反空
                                    </div>
                                </van-col>
                            </van-row>

                            <van-row>
                                <van-col span="12">
                                    <div class="r1">
                                        <div class="text">开仓止盈</div>
                                        <button class="s_btn" @click="showProfit = true">
                                            止盈7点<img class="bq" src="static/img/icon5.svg"/>
                                        </button>
                                    </div>
                                </van-col>
                                <van-col span="12">
                                    <div class="r1">
                                        <div class="text">开仓止损</div>
                                        <button class="s_btn" @click="showLoss = true">
                                            止损7点<img class="bq" src="static/img/icon5.svg"/>
                                        </button>
                                    </div>
                                </van-col>
                            </van-row>

                            <div class="r1">
                                <div class="text">委托方式</div>
                                <div class="z_radio">
                                    <button class="sel">市价</button>
                                    <button>对手价</button>
                                    <button>超价</button>
                                </div>
                                <img src="static/img/icon6.svg"/>
                            </div>
                        </div>
                    </div>
                    <div class="p_box_btn">
                        <div class="z-col">
                            <button>确认反手</button>
                        </div>
                    </div>
                </div>
            </mt-popup>
            <!--止盈止损弹窗-->
            <mt-popup v-model="editMonitoringPosPopup" position="bottom">
                <div class="popup_box">
                    <div class="title">
                        <span>止盈止损</span>
                        <span class="close" @click="closePopup6">取消</span>
                    </div>
                    <div class="body">
                        <div class="zdy_p3">
                            <van-row>
                                <van-col span="12">
                                    <div class="r1">
                                        <div class="text">合约</div>
                                        {{ selectedMonitoringPos.futuresCode }}
                                    </div>
                                </van-col>
                                <van-col span="12">
                                    <div class="r1">
                                        <div class="text">方向</div>
                                        {{ selectedMonitoringPos.orderDirection }}
                                    </div>
                                </van-col>
                            </van-row>

                            <van-row>
                                <van-col span="12">
                                    <div class="r1">
                                        <div class="text">现价</div>
                                        {{ selectedMonitoringStock.nowPrice }}
                                    </div>
                                </van-col>
                                <van-col span="12">
                                    <div class="r1" style="align-items: flex-start">
                                        <div class="text">数量</div>
                                        {{ selectedMonitoringPos.orderNum }}
                                    </div>
                                </van-col>
                            </van-row>

                            <van-row>
                                <van-col span="12">
                                    <div class="r1" style="align-items: flex-start">
                                        <div class="text">止盈价</div>
                                        <div>
                                            <input type="number" v-model="selectedMonitoringPos.profitTargetPrice"/>
                                        </div>

                                    </div>
                                </van-col>
                                <van-col span="12">
                                    <div class="r1">
                                        <div class="text">止损价</div>
                                        <div>
                                            <input type="number" v-model="selectedMonitoringPos.stopTargetPrice"/>
                                            <p class="ww">{{ selectedMonitoringPos.stopTargetPrice }}</p>
                                        </div>
                                    </div>
                                </van-col>
                            </van-row>

                            <div class="r1">
                                <div class="text">触发方式</div>
                                <div class="z_radio">
                                    <button class="sel">最新价</button>
                                    <!--                  <button>对手价</button>-->
                                </div>
                                <img style="opacity: 0" src="static/img/icon6.svg"/>
                            </div>
                            <div class="r1">
                                <div class="text">平仓委托</div>
                                <div class="z_radio">
                                    <button class="sel">市价</button>
                                    <!--                  <button>对手价</button>-->
                                    <!--                  <button>超价</button>-->
                                </div>
                                <img src="static/img/icon6.svg"/>
                            </div>
                        </div>
                        <div class="zdy_p2">
                            <img src="static/img/icon6.svg"/>
                            <span>止盈止损设置仅当天有效，请注意持仓风险！</span>
                        </div>
                    </div>
                    <div class="p_box_btn">
                        <div class="z-col">
                            <button @click="updateCurrentmonitoringPos" v-if="isLoading">确认修改</button>
                            <button class="disabled-btn" v-else>处理中...</button>

                        </div>
                    </div>
                </div>
            </mt-popup>

            <mt-popup v-model="popupVisible7" position="bottom">
                <div class="popup_box">
                    <div class="title">
                        <span>修改止盈止损单</span>
                        <span class="close" @click="closePopup7">取消</span>
                    </div>
                    <div class="body">
                        <div class="zdy_p3">
                            <van-row>
                                <van-col span="12">
                                    <div class="r1">
                                        <div class="text">合约</div>
                                        2401
                                    </div>
                                </van-col>
                                <van-col span="12">
                                    <div class="r1">
                                        <div class="text">方向</div>
                                        买涨
                                    </div>
                                </van-col>
                            </van-row>

                            <van-row>
                                <van-col span="12">
                                    <div class="r1">
                                        <div class="text">均价</div>
                                        2000.00
                                    </div>
                                </van-col>
                                <van-col span="12">
                                    <div class="r1" style="align-items: flex-start">
                                        <div class="text">持仓量</div>
                                        <input type="" value="2"/>
                                    </div>
                                </van-col>
                            </van-row>

                            <van-row>
                                <van-col span="12">
                                    <div class="r1" style="align-items: flex-start">
                                        <div class="text">止盈价</div>
                                        <div>
                                            <input type="" value="2"/>
                                            <p class="ww" style="color: #d74a39">0.34% 3900元</p>
                                        </div>

                                    </div>
                                </van-col>
                                <van-col span="12">
                                    <div class="r1">
                                        <div class="text">止损价</div>
                                        <div>
                                            <input type="" value="2"/>
                                            <p class="ww" style="color: #42a02e">-0.31% -3600元</p>
                                        </div>
                                    </div>
                                </van-col>
                            </van-row>

                            <div class="r1">
                                <div class="text">触发方式</div>
                                <div class="z_radio">
                                    <button class="sel">最新价</button>
                                    <!--                  <button>对手价</button>-->
                                </div>
                                <img style="opacity: 0" src="static/img/icon6.svg"/>
                            </div>
                            <div class="r1">
                                <div class="text">平仓委托</div>
                                <div class="z_radio">
                                    <button class="sel">市价</button>
                                    <!--                  <button>对手价</button>-->
                                    <!--                  <button>超价</button>-->
                                </div>
                                <img src="static/img/icon6.svg"/>
                            </div>
                        </div>
                        <div class="zdy_p2">
                            <img src="static/img/icon6.svg"/>
                            <span>止盈止损设置仅当天有效，请注意持仓风险！</span>
                        </div>
                    </div>
                    <div class="p_box_btn">
                        <div class="z-col" style="padding-right: 4px">
                            <button style="background: #fff;border: 1px solid #ff0000;color: #ff0000">删除止盈止损
                            </button>
                        </div>
                        <div class="z-col" style="padding-left: 4px">
                            <button>确认修改</button>
                        </div>

                    </div>
                </div>
            </mt-popup>

            <mt-popup v-model="popupVisible8" position="bottom">
                <div class="popup_box">
                    <div class="title">
                        <span>委托撤单确认</span>
                        <span class="close" @click="closePopup8">取消</span>
                    </div>
                    <div class="body">
                        <div class="zdy_p3">
                            <van-row>
                                <van-col span="12">
                                    <div class="r1">
                                        <div class="text" style="width: auto;padding-left: 16px;color: #8c8c8c">合约：
                                        </div>
                                        2401
                                    </div>
                                </van-col>
                                <van-col span="12">
                                    <div class="r1">
                                        <div class="text" style="width: auto;padding-left: 16px;color: #8c8c8c">开平：
                                        </div>
                                        买开
                                    </div>
                                </van-col>
                                <van-col span="12">
                                    <div class="r1">
                                        <div class="text" style="width: auto;padding-left: 16px;color: #8c8c8c">价格：
                                        </div>
                                        12035
                                    </div>
                                </van-col>
                                <van-col span="12">
                                    <div class="r1">
                                        <div class="text" style="width: auto;padding-left: 16px;color: #8c8c8c">数量：
                                        </div>
                                        1手
                                    </div>
                                </van-col>
                            </van-row>

                        </div>

                    </div>
                    <div class="p_box_btn">
                        <div class="z-col">
                            <button>撤单</button>
                        </div>

                    </div>
                </div>
            </mt-popup>
            <van-popup v-model="showProfit" position="bottom" z-index="3000">
                <van-picker class="stop-loss-popup" show-toolbar :columns="profitTargetList" @confirm="confirmProfit"
                            :default-index="profitTarget - 1"
                            @cancel="showProfit = false"/>
            </van-popup>
            <van-popup v-model="showLoss" position="bottom" z-index="3000">
                <van-picker class="stop-loss-popup" show-toolbar :columns="stopLossList" @confirm="confirmLoss"
                            @cancel="showLoss = false"
                            :default-index="stopLoss - 1"
                />
            </van-popup>
            <!-- <div class="border_bottom"></div> -->
        </div>

    </div>
</template>

<script>
import Kline from './components/kLine.vue'
import * as api from '@/axios/api'
import Img from '../list/compontent/img'
import Toast from 'vant'
import {clearDataCallback, setDataCallback} from "@/eastmoney/HQData";
import {getAllFuturesPositions} from "@/axios/api";


export default {
    name: 'kline',
    data() {
        return {
            monitoringPos: [],
            stockType: 'qh',
            details: {},
            settings: {},
            allOrder: [],
            postions: [],
            userInfo: {},
            closedPositions: [],
            todayClosedPositionsEarn: 0,
            closedPositionsEarn: 0,
            show1: true,
            count: 0,
            quantity: 0,
            t4: 1,
            flag: 1,
            popupVisible: false,
            closeOnePopup: false,
            popupVisible3: false,
            popupVisible4: false,
            popupVisible5: false,
            editMonitoringPosPopup: false,
            popupVisible7: false,
            popupVisible8: false,
            news: 'tab_2',
            kLineDetails: {}, // K线图详情数据
            singDetails: {},
            scFlag: false,
            acseFlag: false,
            jianjie: '',
            optionBtn: false,
            isOptionOpt: false,
            dialogFlag: false,
            timedata: [],
            newsdetailList: [],
            showProfit: false,
            showLoss: false,
            profitValue: '止盈',
            lossValue: '止损',
            profitTarget: null,
            stopLoss: null,
            profitTargetList: [],
            stopLossList: [],
            closeAllModal: false,
            closeAllPosDirection: 0, // 1买 2卖
            buyingPosDirection: 0, // 1买 2卖
            currentPos: {},
            reloadInterval: {},
            selectedMonitoringPos: {},
            selectedMonitoringStock: {},
            detailsRelaoder: null,
            isMarketClosed: null,
            isHoliday: false,
            isLoading: true,
        }
    },
    components: {
        Img,
        Kline
    },
    created() {
        if (window.localStorage.getItem('USERTOKEN') === "" || window.localStorage.getItem('USERTOKEN') == null || window.localStorage.getItem('USERTOKEN') === undefined) {
            this.$emit('close')
            return;
        }
        const {query} = this.$route
        this.kLineDetails = query
        this.stockType = this.kLineDetails.type
    },

    async mounted() {
        await this.reload();
        this.profitTargetList = this.generateColumns("止盈")
        this.stopLossList = this.generateColumns("止损")
        this.userInfo = this.$store.state.userInfo;
        this.quantity = this.details.minNum;
        setDataCallback((data) => {
            if (!data) {
                return
            }
            this.singDetails.nowPrice = data.price
            this.loadPositions();
        });
        console.info(this.closedPositions.length)
        this.loadPositionsEarn()
        // Set up an interval to call this.reload every 60 seconds
        this.reloadInterval = setInterval(async () => {
            await this.loadAll();
        }, 10000);

        // this.detailsRelaoder = setInterval(async () => {
        //     await this.loadAllDetails();
        // }, 2000);
        const lossSaved = localStorage.getItem("loss")
        const profitSaved = localStorage.getItem("profit")
        if(lossSaved) {
            const loss = JSON.parse(lossSaved)
            this.confirmLoss(loss)
        } else {
            this.confirmLoss(["止损 12 点"])
        }
        if(profitSaved) {
            const profit = JSON.parse(profitSaved)
            this.confirmProfit(profit)
        } else {
            this.confirmProfit(["止盈 13 点"])
        }
        // this.lossValue = this.stopLossList[11].text
        // this.profitValue = this.profitTargetList[12].text
        // this.profitTarget = 13;
        // this.stopLoss = 12;
        this.isLoading = false;
    },
    beforeDestroy() {
        // Clear the interval when the component is destroyed
        clearDataCallback();
        clearInterval(this.reloadInterval);
        clearInterval(this.detailsRelaoder);
    },

    // beforeDestroy() {
    //   this.Klinetype = false;
    //   window.clearInterval()
    // },
    methods: {
        async editCurrentMonitoringPos(pos) {
            let opts = {
                code: this.kLineDetails.code,
                stockType: this.kLineDetails.type
            }
            this.selectedMonitoringPos = pos;
            await api.getSingleStock(opts).then(res => {
                if (res.status === 0) {
                    this.selectedMonitoringStock = res.data.stock
                }
            })
            console.log(pos)
            this.editMonitoringPosPopup = true;
        },
        async getUserInfo() {
            // 获取用户信息
            let data = await api.getUserInfo()
            if (data.status === 0) {
                this.$store.state.userInfo = data.data
                this.getOpation()
            }
            this.userInfo = this.$store.state.userInfo;
        },
        async updateCurrentmonitoringPos() {
            const profit = Math.ceil(this.selectedMonitoringPos.profitTargetPrice);
            const stop = Math.ceil(this.selectedMonitoringPos.stopTargetPrice);
            const pos = this.selectedMonitoringPos;
            const price = this.buyOrderPrice;
            if (pos.orderDirection === "买跌") {
                if (profit >= price) {
                    this.$store.commit('elAlertShow', {
                        'elAlertShow': true,
                        'elAlertText': '盈利目标价格应小于购买价格',
                    });
                    this.editMonitoringPosPopup = false;
                    return;
                }
                if (stop <= price) {
                    this.$store.commit('elAlertShow', {
                        'elAlertShow': true,
                        'elAlertText': '止损目标价格应大于购买价格',
                    });
                    this.editMonitoringPosPopup = false;
                    return;
                }

            } else if (pos.orderDirection === "买涨") {
                if (profit <= price) {
                    this.$store.commit('elAlertShow', {
                        'elAlertShow': true,
                        'elAlertText': '盈利目标价格应大于购买价格',
                    });
                    this.editMonitoringPosPopup = false;
                    return;
                }
                if (stop >= price) {
                    this.$store.commit('elAlertShow', {
                        'elAlertShow': true,
                        'elAlertText': '止损目标价格应小于购买价格',
                    });
                    this.editMonitoringPosPopup = false;
                    return;
                }
            }

            const data = await api.updateProfitTarget({
                type: "future",
                positionSn: this.selectedMonitoringPos.positionSn,
                profitTarget: Math.ceil(this.selectedMonitoringPos.profitTargetPrice),
                stopTarget: Math.ceil(this.selectedMonitoringPos.stopTargetPrice),
            });
            if (data.status === 0) {
                this.$store.commit('elAlertShow', {
                    'elAlertShow': true,
                    'elAlertText': data.msg,
                    'elAlertType': 'success'
                });
            } else {
                this.$store.commit('elAlertShow', {'elAlertShow': true, 'elAlertText': data.msg});
            }
            this.editMonitoringPosPopup = false;

        },
        async loadAll() {
            await this.loadDetails()
            if (this.kLineDetails.if_us === '1') {
                await this.getSingDetailUs()
            } else {
                await this.getSingDetails()
            }
            await this.loadSettings();
            await this.getUserInfo();
            await this.loadPositions();
            this.loadPositionsEarn();
            if (this.kLineDetails.pos_tab === '1') {
                this.flag = 2
            }
            await this.getOpation()
            // this.$Lazyload();
            await this.getUserInfo()
        },
        async loadAllDetails() {
            await this.loadDetails()
            if (this.kLineDetails.if_us === '1') {
                await this.getSingDetailUs()
            } else {
                await this.getSingDetails()
            }
        },
        async reload() {
            this.loadDetails()
            if (this.kLineDetails.if_us === '1') {
                this.getSingDetailUs()
            } else {
                this.getSingDetails()
            }
            this.loadSettings();
            this.getUserInfo();
            await this.loadPositions();
            this.loadPositionsEarn()
            if (this.kLineDetails.pos_tab === '1') {
                this.flag = 2
            }
            await this.getOpation()
            // this.$Lazyload();
            await this.getUserInfo()
            await this.loadMarketStatus()

        },
        padZero(number) {
            return number < 10 ? '0' + number : number;
        },
        async loadMarketStatus() {
            // 获取当前时间
            let now = new Date();
            let currentHour = now.getHours();
            let currentMinute = now.getMinutes();


            let transAmBegin = this.details.transAmBegin.split(":");
            let transAmEnd = this.details.transAmEnd.split(":");
            let transPmBegin = this.details.transPmBegin.split(":");
            let transPmEnd = this.details.transPmEnd.split(":");

            // 将时间转换为分钟数
            let transAmBeginMinutes = parseInt(transAmBegin[0]) * 60 + parseInt(transAmBegin[1]);
            let transAmEndMinutes = parseInt(transAmEnd[0]) * 60 + parseInt(transAmEnd[1]);
            let transPmBeginMinutes = parseInt(transPmBegin[0]) * 60 + parseInt(transPmBegin[1]);
            let transPmEndMinutes = parseInt(transPmEnd[0]) * 60 + parseInt(transPmEnd[1]);
            let currentMinutes = currentHour * 60 + currentMinute;
            let currentDay = now.getDay();
            let calculatedResult = currentMinutes < transAmBeginMinutes ||
                (currentMinutes > transAmEndMinutes && currentMinutes < transPmBeginMinutes) ||
                currentMinutes > transPmEndMinutes;
            // 如果今天是周末，则市场关闭
            if (currentDay === 0 || currentDay === 6) {
                // 获取站点产品配置
                let result = await api.getProductSetting()
                if (result.status === 0 && result.data.holidayDisplay) {
                    this.isMarketClosed = true;
                    this.isHoliday = true;
                    return;
                }
            }
            // 从this.details中获取时间参数
            // 判断是否在休市时间内
            this.isMarketClosed = calculatedResult;
        },
        getNextOpenTime() {
            // 获取当前时间
            let now = new Date();
            let currentDay = now.getDay();


            let currentHour = now.getHours();
            let currentMinute = now.getMinutes();

            // 从this.details中获取时间参数
            let transAmBegin = this.details.transAmBegin.split(":");
            let transAmEnd = this.details.transAmEnd.split(":");
            let transPmBegin = this.details.transPmBegin.split(":");
            let transPmEnd = this.details.transPmEnd.split(":");

            // 将时间转换为分钟数
            let transAmBeginMinutes = parseInt(transAmBegin[0]) * 60 + parseInt(transAmBegin[1]);
            let transAmEndMinutes = parseInt(transAmEnd[0]) * 60 + parseInt(transAmEnd[1]);
            let transPmBeginMinutes = parseInt(transPmBegin[0]) * 60 + parseInt(transPmBegin[1]);
            let transPmEndMinutes = parseInt(transPmEnd[0]) * 60 + parseInt(transPmEnd[1]);
            let currentMinutes = currentHour * 60 + currentMinute;
            if (this.isHoliday) {
                return "节假日休市";
            }
            // 判断是否在休市时间内
            // 如果今天是周六
            if (currentDay === 6) {
                now.setDate(now.getDate() + 2); // 设置为下个星期一
                return `下次开市: ${this.padZero(now.getMonth() + 1)}-${this.padZero(now.getDate())} ${this.padZero(parseInt(transAmBegin[0]))}:${this.padZero(parseInt(transAmBegin[1]))}`;
            }
            // 如果今天是周日
            else if (currentDay === 0) {
                now.setDate(now.getDate() + 1); // 设置为下个星期一
                return `下次开市: ${this.padZero(now.getMonth() + 1)}-${this.padZero(now.getDate())} ${this.padZero(parseInt(transAmBegin[0]))}:${this.padZero(parseInt(transAmBegin[1]))}`;
            }
            if (currentMinutes < transAmBeginMinutes) {
                // 早于上午开市时间
                return `下次开市: ${this.padZero(now.getMonth() + 1)}-${this.padZero(now.getDate())} ${this.padZero(parseInt(transAmBegin[0]))}:${this.padZero(parseInt(transAmBegin[1]))}`;
            } else if (currentMinutes > transAmEndMinutes && currentMinutes < transPmBeginMinutes) {
                // 下午休市时间
                return `下次开市: ${this.padZero(now.getMonth() + 1)}-${this.padZero(now.getDate())} ${this.padZero(parseInt(transPmBegin[0]))}:${this.padZero(parseInt(transPmBegin[1]))}`;
            } else if (currentMinutes > transPmEndMinutes) {
                // 超过下午闭市时间，考虑到次日
                now.setDate(now.getDate() + 1); // 设置为次日
                return `下次开市: ${this.padZero(now.getMonth() + 1)}-${this.padZero(now.getDate())} ${this.padZero(parseInt(transAmBegin[0]))}:${this.padZero(parseInt(transAmBegin[1]))}`;
            } else {
                // 市场现在开放
                return "市场已开放";
            }
        },
        transformNumber(number, type) {
            if (type === '止盈') {
                return number * this.details.eachPoint;
            } else {
                return -number * this.details.eachPoint;
            }
        },
        confirmLoss(item) {
            localStorage.setItem("loss", JSON.stringify(item))
            if (item[0] === '无') {
                this.lossValue = '止损';
                this.stopLoss = null;
                this.showLoss = false;
                return;
            }
            this.lossValue = item[0];
            // Subtract the selected value from the current price to get the stop loss price
            let matches = item[0].match(/止损 (\d+) 点/);
            if (!(matches && matches[1])) {
                throw new Error("Invalid stop loss value");
            }

            this.stopLoss = parseFloat(matches[1]);

            // if (this.buyingPosDirection === 1) {
            //     this.profitTarget = Number(this.singDetails.nowPrice) - parseFloat(matches[1]);
            // } else if (this.buyingPosDirection === 2) {
            //     this.profitTarget = Number(this.singDetails.nowPrice) + parseFloat(matches[1]);
            // }

            this.showLoss = false;
        },
        confirmProfit(item) {
            localStorage.setItem("profit", JSON.stringify(item))
            if (item[0] === '无') {
                this.profitValue = '止盈';
                this.profitTarget = null;
                this.showProfit = false;
                return;
            }
            this.profitValue = item[0];
            // Add the selected value to the current price to get the profit target price
            let matches = item[0].match(/止盈 (\d+) 点/);
            // console.log(item[0])

            if (!(matches && matches[1])) {
                throw new Error("Invalid profit target value");
            }

            this.profitTarget = parseFloat(matches[1]);
            // if (this.buyingPosDirection === 1) {
            //     this.profitTarget = Number(this.singDetails.nowPrice) + parseFloat(matches[1]);
            // } else if (this.buyingPosDirection === 2) {
            //     this.profitTarget = Number(this.singDetails.nowPrice) - parseFloat(matches[1]);
            // }

            this.showProfit = false;
        },
        generateColumns(type) {
            const arr = [];
            arr.push({
                text: '无',
                children: [
                    {
                        text: '',
                    }
                ]
            });
            for (let i = 2; i <= 100; i++) {
                const transformedValue = this.transformNumber(i, type);
                arr.push({
                    text: `${type} ${i} 点`,
                    value: {
                        original: i,
                        transformed: transformedValue
                    },
                    children: [
                        {
                            text: `${transformedValue} 元`,
                        }
                    ]
                });
            }
            return arr;
        },
        increment() {
            if (this.quantity < this.details.maxNum) {
                this.quantity++;
            }
        },
        decrement() {
            if (this.quantity > 0 && this.quantity > this.details.minNum) {
                this.quantity--;
            }
        },
        ZZtabs(n) {
            this.flag = n
        },
        t4tabs(n) {
            this.t4 = n
        },
        async loadDetails() {
            let code = this.kLineDetails.code

            if (this.stockType === 'qh') {
                let opts = {
                    code: code
                }
                let data = await api.queryFuturesByGid(opts);
                if (data.status === 0) {
                    this.details = data.data
                } else {
                    Toast(data.msg)
                    return;
                }
            }
        },

        async loadSettings() {
            this.settings = (await api.getSetting()).data;
        },
        async loadPositions() {
            let opts = {}
            let data = {}
            if (this.stockType === 'qh') {
                data = await api.getAllFuturesPositions()
            } else {
                data = await api.getOrderList(opts);
            }
            if (data.status === 0) {
                this.allOrder = []
                data.data.forEach(element => {
                    // if element.buyOrderTime is not today (8:00 to tomorrow 8:00), return

                     if (!this.isToday(element.buyOrderTime)) {
                         return;
                     }

                    if (element.futuresName) {
                        element.stockName = element.futuresName
                    }
                    this.allOrder.push(element)
                })
                this.totalss = data.data.length
            } else {
                Toast(data.msg)
                return;
            }

            this.postions = this.allOrder.filter(item => {
                return item.sellOrderTime === null || item.sellOrderTime === undefined
            })

            this.closedPositions = this.allOrder.filter(item => {
                return item.sellOrderTime !== null && item.sellOrderTime !== undefined
            })
            console.log(this.closedPositions)
            this.monitoringPos = this.allOrder.filter(item => item.triggerStop !== null && item.triggerStop !== undefined)
        },
        loadPositionsEarn() {
            // 获取今天的日期并设置时间为早上8点
            let today = new Date();
            today.setHours(8, 0, 0, 0);

            // 获取明天的日期并设置时间为早上8点
            let tomorrow = new Date(today);
            tomorrow.setDate(today.getDate() + 1);
            this.todayClosedPositionsEarn = 0
            this.closedPositionsEarn = 0
            this.closedPositions.forEach(item => {
                // 检查sellOrderTime是否在指定的时间范围内
                if (this.isToday(item.sellOrderTime)) {
                    this.todayClosedPositionsEarn += item.profitAndLose;
                }
                this.closedPositionsEarn += item.profitAndLose;
            });

            // 四舍五入到两位小数
            this.todayClosedPositionsEarn = Math.floor(this.todayClosedPositionsEarn * 100) / 100;
            this.closedPositionsEarn = Math.floor(this.closedPositionsEarn * 100) / 100;
        },
        isToday(timestamp) {
            // 获取当前日期的时间戳
            const today = new Date();
            today.setHours(0, 0, 0, 0); // 设置时间为今天的开始时间

            // 将给定时间戳转换为日期对象
            const date = new Date(timestamp);

            // 比较日期部分是否相同
            return date.getTime() >= today.getTime();
            ;
        },
        playSound() {
            const audio = new Audio('static/img/click-sound.mp3')
            audio.play()
        },
        openBuyPopup() {
            this.popupVisible = true
            const audio = new Audio('static/img/click-sound.mp3')
            audio.play()
        },
        closePopup() {
            this.popupVisible = false
        },
        closePos(pos) {
            this.currentPos = pos
            this.closeOnePopup = true
            const audio = new Audio('static/img/click-sound.mp3')
            audio.play()
        },
        async closeCurrentPos() {
            this.closeOnePopup = false
            await this.closeOne(this.currentPos.positionSn)
        },
        closePopup2() {
            this.closeOnePopup = false
        },

        openPopup3() {
            this.popupVisible3 = true
            const audio = new Audio('static/img/click-sound.mp3')
            audio.play()
        },
        closePopup3() {
            this.popupVisible3 = false
        },

        openPopup4() {
            this.popupVisible4 = true
            const audio = new Audio('static/img/click-sound.mp3')
            audio.play()
        },
        closePopup4() {
            this.popupVisible4 = false
        },

        openPopup5() {
            this.popupVisible5 = true
            const audio = new Audio('static/img/click-sound.mp3')
            audio.play()
        },
        closePopup5() {
            this.popupVisible5 = false
        },

        openPopup6() {
            this.editMonitoringPosPopup = true
            const audio = new Audio('static/img/click-sound.mp3')
            audio.play()
        },
        closePopup6() {
            this.editMonitoringPosPopup = false
        },

        openPopup7() {
            this.popupVisible7 = true
            const audio = new Audio('static/img/click-sound.mp3')
            audio.play()
        },
        closePopup7() {
            this.popupVisible7 = false
        },
        openPopup8() {
            this.popupVisible8 = true
            const audio = new Audio('static/img/click-sound.mp3')
            audio.play()
        },

        closePopup8() {
            this.popupVisible8 = false
        },
        canCloseBuy() {
            return this.getCurrentBuyPostionsCount() > 0
        },
        canCloseSell() {
            return this.getCurrentSellPostionsCount() > 0
        },
        getAvaliablePostionsTotal() {
            let total = 0
            let postions = this.postions
            postions.forEach(item => {
                total += item.profitAndLose
            })
            return (Math.floor(total * 100) / 100);
        },
        getCurrentPosCode() {
            if (this.currentPos.stockCode) {
                return this.currentPos.stockCode
            } else if (this.currentPos.futuresCode) {
                return this.currentPos.futuresCode
            }
        },
        getCurrentBuyPostions() {
            return this.postions.filter(x => {
                return this.singDetails.code === this.getTheFuckingCode(x) && x.orderDirection === "买涨";
            });
        },
        getCurrentBuyPostionsEarn() {
            return Math.floor(this.getCurrentBuyPostions().reduce((total, item) => {
                return total + item.profitAndLose
            }, 0) * 100) / 100
        },
        getCurrentSellPostions() {
            return this.postions.filter(x => {
                return this.singDetails.code === this.getTheFuckingCode(x) && x.orderDirection === "买跌";
            });
        },
        getCurrentSellPostionsCount() {
            return this.getCurrentSellPostions().reduce((sum, position) => sum + position.orderNum, 0);
        },

        getCurrentBuyPostionsCount() {
            return this.getCurrentBuyPostions().reduce((sum, position) => sum + position.orderNum, 0);
        },
        getCurrentSellPostionsEarn() {
            return Math.floor(this.getCurrentSellPostions().reduce((total, item) => {
                return total + item.profitAndLose;
            }, 0) * 100) / 100;
        },
        getNeedClosePosCount() {
            let pos = [];
            if (this.closeAllPosDirection === 1) {
                pos = this.getCurrentBuyPostions()
            } else if (this.closeAllPosDirection === 2) {
                pos = this.getCurrentSellPostions()
            }

            return pos.reduce((total, item) => {
                return total + item.orderNum
            }, 0)
        },
        getTheFuckingCode(detail) {
            if (this.kLineDetails.type === "qh") {
                return detail.futuresCode
            } else {
                return detail.stockCode
            }
        },
        async closeAllPos() {
            let pos = "";

            // 做多
            this.toggleLoading();
            if (this.closeAllPosDirection === 1) {
                if (this.getCurrentBuyPostionsCount() <= 0) {
                    this.closeAllModal = false
                    return
                }
                pos = "买涨";
            } else if (this.closeAllPosDirection === 2) {
                if (this.getCurrentSellPostionsCount() <= 0) {
                    this.closeAllModal = false
                    return
                }
                pos = "买跌";
            }

            let res = await api.sellAllFutures({
                positionDirection: pos
            });
            await this.reload()
            this.closeAllModal = false
            if (res.status === 0) {
                this.$store.commit('elAlertShow', {
                    'elAlertShow': true,
                    'elAlertText': res.msg,
                    'elAlertType': 'success'
                });
            } else {
                this.$store.commit('elAlertShow', {'elAlertShow': true, 'elAlertText': res.msg});
            }
            this.toggleLoading();
        },
        toggleLoading() {
            this.isLoading = !this.isLoading;
        },
        // 委托开仓
        async openPos() {
            this.toggleLoading();
            // buy num must be int
            if(this.quantity % 1 !== 0) {
                this.$store.commit('elAlertShow', {'elAlertShow': true, 'elAlertText': '委托数量必须为整数'});
                this.toggleLoading();
                return;
            }
            let opts = {
                buyNum: this.quantity,
                lever: 1,
            }
            opts.buyType = this.buyingPosDirection - 1
            if (this.buyingPosDirection === 1) {
                if (this.profitTarget) {
                    opts.profitTarget = Number(this.singDetails.nowPrice) + Number(this.profitTarget)
                }
                if (this.stopLoss) {
                    opts.stopLoss = Number(this.singDetails.nowPrice) - Number(this.stopLoss)
                }
            } else {
                if (this.profitTarget) {
                    opts.profitTarget = Number(this.singDetails.nowPrice) - Number(this.profitTarget)
                }
                if (this.stopLoss) {
                    opts.stopLoss = Number(this.singDetails.nowPrice) + Number(this.stopLoss)
                }
            }

            let data = {}
            if (this.stockType === 'qh') {
                opts.futuresId = this.details.id
                data = await api.buyFutures(opts);
            }
            this.popupVisible = false
            if (data.status === 0) {
                this.$store.commit('elAlertShow', {
                    'elAlertShow': true,
                    'elAlertText': data.data,
                    'elAlertType': 'success'
                });
            } else {
                this.$store.commit('elAlertShow', {'elAlertShow': true, 'elAlertText': data.msg});
            }
            this.toggleLoading();
            await this.reload()
        },
        async closeOne(val) {
            this.toggleLoading();

            let result = false;
            let opt = {
                positionSn: val
            }
            let data = await api.sellFutures(opt);
            console.log(data)
            await this.reload();
            if (data.status === 0) {
                this.$store.commit('elAlertShow', {
                    'elAlertShow': true,
                    'elAlertText': data.msg,
                    'elAlertType': 'success'
                });
            } else {
                this.$store.commit('elAlertShow', {'elAlertShow': true, 'elAlertText': data.msg});

            }
            this.toggleLoading();
            return result;
        },
        async getHknews() {
            await api.queryIndexNews().then(res => {
                if (res.status == 0) {
                    this.newsdetailList = res.data.data
                }
            })
        },
        async getNohknews() {
            let data = await api.queryNewsList(4)
            this.newsdetailList = data.data.list
        },
        async option() {
            if (this.optionBtn) {
                return
            }
            this.optionBtn = true
            if (this.isOptionOpt) {
                let data = await api.delOption({code: this.kLineDetails.code})
                if (data.status === 0) {
                    this.getOpation()
                    this.optionBtn = false
                    this.$message({
                        message: this.$t('hj97'),
                        type: 'success'
                    })
                } else {
                    this.optionBtn = false
                    this.$message({
                        message: data.msg,
                        type: 'warning'
                    })
                }
            } else {
                let data = await api.addOption({code: this.kLineDetails.code})
                if (data.status === 0) {
                    this.getOpation()
                    this.optionBtn = false
                    this.$message({
                        message: this.$t('hj96'),
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: data.msg,
                        type: 'warning'
                    })
                    this.optionBtn = false
                }
            }
            if (navigator.vibrate) {
                // 支持
                navigator.vibrate([55])
            }
        },
        async getOpation() {
            let opts = {
                code: this.$route.query.code
            }
            let data = await api.isOption(opts)
            if (data.status === 0) {
                // 0 --> 未添加
                this.isOptionOpt = false
            } else {
                this.isOptionOpt = true
            }
        },
        async getSingDetails() {
            let opts = {
                code: this.kLineDetails.code,
                stockType: this.kLineDetails.type
            }
            await api.getSingleStock(opts).then(res => {
                if (res.status === 0) {
                    this.singDetails = res.data.stock

                    if (res.data.introduction) {
                        this.jianjie = res.data.introduction
                    } else {
                        this.jianjie = res.data.indexintroduction
                    }

                    if (this.kLineDetails.if_zhishu != '0' && this.singDetails.gid.indexOf('hk') > -1) {
                        this.getHknews()
                    } else {
                        this.getNohknews()
                    }
                }
            })
        },
        async getSingDetailUs() {
            let opts = {
                code: this.kLineDetails.code,
                stockType: this.kLineDetails.type
            }
            await api.getUsDetail(opts).then(res => {
                //
                // var that = this
                // if(!res){
                //   setTimeout(() => {
                //     that.getSingDetailUs()
                //   }, 3000);

                // }
                if (res.status === 0) {
                    this.singDetails = res.data.stock
                    this.timedata = res.data.timedata
                    if (res.data.introduction) {
                        this.jianjie = res.data.introduction
                    } else {
                        this.jianjie = res.data.indexintroduction
                    }
                    this.getNohknews()

                }
            })
        },
        handleJj() {
            this.acseFlag = true
            setTimeout(() => {
                this.acseFlag = false
            }, 1000)
            if (navigator.vibrate) {
                // 支持
                navigator.vibrate([55])
            }
        },
        handleBack() {
            this.$router.go(-1)
        },
        handleSc() {
            this.scFlag = !this.scFlag
        },
        goBuy(index) {
            this.$router.push({
                path: '/TradingBuy',
                query: {
                    t: index,
                    code: this.kLineDetails.code,
                    m: this.singDetails.nowPrice,
                    type: this.kLineDetails.if_zhishu,
                    id: this.singDetails.id,
                    name: this.kLineDetails.name,
                    if_us: this.kLineDetails.if_us,
                }
            })
            if (navigator.vibrate) {
                // 支持
                navigator.vibrate([55])
            }
        },
    },
    watch: {
        quantity(newVal) {
            if (newVal < this.details.minNum) {
                newVal = this.details.minNum;
                this.quantity = this.details.minNum;
            } else if (newVal > this.details.maxNum) {
                newVal = this.details.maxNum;
                this.quantity = this.details.maxNum;
            }
        }
    },
    filters: {
        getName(name) {
            if (name.length > 15) {
                return name.substring(0, 14)
            } else {
                return name
            }
        }
        ,
        gettime(time) {
            if (!time) {
                return ''
            }
            var nd = new Date(time)
            var y = nd.getFullYear()
            var mm = nd.getMonth() + 1
            var d = nd.getDate()
            var h = nd.getHours()
            var m = nd.getMinutes()
            var c = nd.getSeconds()
            if (mm < 10) {
                mm = '0' + mm
            }
            if (d < 10) {
                d = '0' + d
            }
            if (h < 10) {
                h = '0' + h
            }
            if (m < 10) {
                m = '0' + m
            }
            if (c < 10) {
                c = '0' + c
            }
            //17:35:2922-06-2022
            return y + '-' + mm + '-' + d + ' ' + h + ':' + m + ':' + c
        },

        utc2beijing(utc_datetime) {
            // 转为正常的时间格式 年-月-日 时:分:秒
            var T_pos = utc_datetime.indexOf('T')
            var Z_pos = utc_datetime.indexOf('Z')
            var year_month_day = utc_datetime.substr(0, T_pos)
            var hour_minute_second = utc_datetime.substr(T_pos + 1, Z_pos - T_pos - 1)
            var new_datetime = year_month_day + ' ' + hour_minute_second // 2017-03-31 08:02:06

            // 处理成为时间戳
            timestamp = new Date(Date.parse(new_datetime))
            timestamp = timestamp.getTime()
            timestamp = timestamp / 1000

            // 增加8个小时，北京时间比utc时间多八个时区
            var timestamp = timestamp + 8 * 60 * 60

            // 时间戳转为时间
            var beijing_datetime = new Date(parseInt(timestamp) * 1000).toLocaleString().replace(/年|月/g, '-').replace(/日/g, ' ')
            return beijing_datetime // 2017-03-31 16:02:06
        }
    }
}

</script>

<style scoped lang="less">
body::-webkit-scrollbar {
    display: none;
}

.bottom-container {
    background: #fff;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 24px;
    overflow-y: auto;
    flex-grow: 1;
}

.zdy_p3 {
    font-size: 20px;

    .r1 {
        display: flex;
        align-items: center;
        margin: 20px 0;
        line-height: 28px;

        .ww {
            font-size: 12px;
            color: #8c8c8c;
        }

        input {
            border: 1px solid rgb(230, 230, 230);
            width: 70px;
            padding: 0 8px;
            height: 28px;
        }

        .text {
            flex: 0 0 auto;
            width: 140px;
            text-align: center;
        }

        img {
            flex: 0 0 auto;
            width: 24px;
            margin-left: 16px;
            margin-right: 20px;
        }

        .z_radio {
            display: flex;
            width: 100%;

            button {
                height: 44px;
                background: #f1f1f1;
                width: 33.333%;
                border: none;

                &.sel {
                    background-image: linear-gradient(to right, #f68a4a, #eb4d32);
                    color: #fff;
                }

                &:nth-child(1) {
                    border-radius: 5px 0 0 5px;
                }

                &:nth-last-child(1) {
                    border-radius: 0 5px 5px 0;
                }
            }
        }
    }

}

.popup_box {
    background: #fff;
    width: 100vw;

    .title {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 16px 0;
        font-size: 24px;
        font-weight: bold;
        border-bottom: 1px solid #e6e6e6;

        .close {
            position: absolute;
            right: 16px;
            color: #eb4d32;
            opacity: 1;
            font-weight: 500;
        }
    }

    .s_btn {
        background: #f0f0f2;
        border: none;
        height: 50px;
        border-radius: 8px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        font-size: 20px;
        position: relative;
        overflow: hidden;

        img {
            height: 30px;
        }

        &[disabled] {
            opacity: 0.5;
        }

        .bq {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 20px;
            height: auto;
            margin: 0;
        }
    }

    .zdy_p1 {
        display: flex;
        flex-wrap: wrap;
        padding: 20px;
        font-size: 20px;
        margin: 0 -10px;

        .z_col {
            width: 50%;
            color: #8c8c8c;
            padding: 10px;

            span {
                color: #000;
            }
        }
    }

    .zdy_p2 {
        color: #eb4d32;
        display: flex;
        align-items: center;
        font-size: 20px;
        padding: 0 20px;

        img {
            width: 26px;
            margin-right: 8px;
        }
    }

    .p_box_btn {
        display: flex;
        padding: 20px;

        .z-col {
            flex: 1;

            button {
                width: 100%;
                border: none;
                background-image: linear-gradient(to right, #f68a4a, #eb4d32);
                color: #fff;
                font-size: 25px;
                height: 60px;
                border-radius: 5px;

            }
            .disabled-btn {
                background-image: none;
                color: #b3b3b3;
            }
        }
    }
}

.zdy_t6 {
    .r1 {
        padding: 12px 0;
        border-bottom: 1px solid #e6e6e6;
    }

    .r2 {
        display: flex;
        margin: 20px 0;

        > div {
            flex: 1;
        }
    }

    .r3 {
        display: flex;

        > div {
            flex: 1;
        }
    }

    .text1 {
        color: #afafaf;
        font-size: 16px;
    }

    .text2 {
        color: #afafaf;
        font-size: 16px;
        margin-bottom: 5px;

        display: flex;
        align-items: center;

        img {
            width: 23px;
            margin-left: 3px;
        }
    }

    .text3 {
        color: #1e1e1e;
        font-size: 20px;
        margin-top: 10px;
    }
}

.zdy_t5 {
    font-size: 18px;
    max-height: 100%;

    table {
        width: 100%;

        th {
            padding: 16px 0;
            border-bottom: 1px solid #e6e6e6;
            color: #8c8c8c;
            font-size: 16px;
        }

        td {
            vertical-align: middle;
            padding: 15px 0;
            border-bottom: 1px solid #e6e6e6;
            font-size: 18px;
        }

        .box_btn {
            display: flex;
            justify-content: flex-end;
            padding-left: 8px;

            button {
                border: none;
                border-radius: 5px;
                background-image: linear-gradient(to right, #f68a4a, #eb4d32);
                color: #fff;
                padding: 6px 6px;
                margin-left: 6px;
            }
        }
    }
}

.zdy_t4 {
    display: flex;
    justify-content: space-around;
    font-size: 20px;
    border-bottom: 1px solid #e6e6e6;

    .item {
        line-height: 50px;

        &.sel {
            border-bottom: 4px solid #e75335;
            color: #e75335;
        }
    }
}

.zdy_tabs {
    display: flex;
    justify-content: center;
    line-height: 1;

    margin-top: 15px;
    background: #fff;
    padding: 15px 0;

    .zdy_box {
        display: flex;
        justify-content: center;
        border: 1px solid #d35942;

        .item {
            font-size: 20px;
            padding: 10px 15px;
            border-left: 1px solid #d35942;
            color: #d35942;

            &:nth-child(1) {
                border-left: none;
            }

            &.sel {
                background-image: linear-gradient(to right, #f68a4a, #eb4d32);
                color: #fff;
            }
        }
    }
}

.zdy_t1 {
    display: flex;
    padding-top: 8px;

    .earn {
        font-size: 22px;
    }

    .col {
        flex: 1;
        padding: 0 6px;

        .item {
            border: 1px solid #e6e6e6;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 5px;

            button {
                border: none;
                font-size: 18px;
                padding: 8px 12px;
                border-radius: 8px;
                background: #e7ecef;
                color: #000;
            }

            .sel {
                background-image: linear-gradient(to right, #f68a4a, #eb4d32);
                color: #fff;
            }
        }
    }
}

.zdy_stepper {
    display: flex;
    width: 100%;

    .w-50 {
        width: 50%;
        padding: 0 6px;

        button {
            width: 100%;
        }
    }

    &.v2 {
        margin: 0 -6px;
    }
}

.zdy_t2 {
    display: flex;
    align-items: center;
    padding-top: 10px;

    .left {
        width: 100%;
    }

    .right {
        flex: 0 0 auto;
        width: 200px;
        margin-right: -12px;

        .zdy_jt {
            margin: 12px 0;
            transition: all 250ms;

            img {
                width: 128px;
            }

            span {
                font-size: 24px;
            }


            &:active {
                transform: scale(0.8);
            }
        }

    }

    .zdy_row {
        display: flex;
        align-items: center;
        margin: 24px 0;

        input {
            width: 100%;
            text-align: center;
            background: #f0f0f2;
            margin: 0 4px;
            font-size: 20px;
        }
    }

    .k1 {
        margin-right: 12px;
        flex: 0 0 auto;
    }

    .s_btn {
        background: #f0f0f2;
        border: none;
        height: 50px;
        border-radius: 8px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        font-size: 20px;
        position: relative;
        overflow: hidden;

        img {
            height: 30px;
        }

        &[disabled] {
            opacity: 0.5;
        }

        .bq {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 20px;
            height: auto;
        }
    }
}

.zdy_jt {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: relative;

    > img {
        width: 50px;
    }

    span {
        position: absolute;
        font-size: 5px;
    }
}

.zdy_t3 {
    display: flex;
    flex-wrap: wrap;

    .z_col {
        width: 50%;
        color: #8c8c8c;
        font-size: 20px;
        padding: 6px 0;
    }
}

.news-tab {
    width: 100%;
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 0.2rem;
    border-radius: 0.4rem 0.4rem 0 0;
    padding-top: 0.3rem;

    .t_title {
        width: 100%;
        font-size: 0.4546rem;
        margin-top: 0.2rem;
        padding: 0 0.3rem;

        span {
            font-weight: 700;
        }
    }

    /deep/ .is-selected .tab-name {
        position: relative;
    }

    /deep/ .mint-navbar .mint-tab-item.is-selected {
        border: 0 !important;
        border-bottom: none;
    }

    /deep/ .is-selected .tab-name:after {
        position: absolute;
        display: block;
        content: '';
        height: .07rem;
        background-color: #1381A4;
        width: 100%;
        left: 0;
        bottom: -.25rem;
    }
}

.news-content {
    position: relative;
    padding: 0.3rem;
}

.item-out {
    position: relative;
    border-left: 0.01rem solid rgba(192, 192, 192, 0.8);
    padding: 0 0.25rem 1rem 0.25rem;
}

.item-out::before {
    content: "●";
    position: absolute;
    top: -0.1rem;
    left: -0.128rem;
    margin: auto;
}

.item-times {
    color: #999;
    margin-bottom: 0.15rem;
}

.titContent {
    position: relative;
    width: 100%;
    font-size: .35rem;
    line-height: .46rem;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
}


.ti_cont {
    width: 100%;
    display: flex;
}

.kline_detail_page {
    width: 100%;
    height: 100vh;

    //height: calc(100% - 1.7rem);
    overflow: auto;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */

    > .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
        justify-content: space-between;
    }
}

.sss {
    width: 50%;
    height: 1.2rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.detail_title {
    width: 100%;
    // height: 3.2rem;
    padding: 0 0.3rem;
    background: #fff;

    .top_back {
        width: 50%;
        height: 1.2rem;
        display: flex;
        align-items: center;

        .left_back {
            width: 0.8rem;
            height: 80%;
            display: flex;
            align-items: center;

            > img {
                margin-top: 0.2rem;
                width: 0.6rem;
                height: 0.6rem;
            }
        }

        .right_title {
            width: 3rem;
            height: 80%;

            .t_t {
                width: 100%;
                height: 70%;
                display: flex;
                align-items: center;
                font-size: 0.4615rem;

                span {
                    font-weight: 600;
                }
            }

            .b_t {
                width: 100%;
                height: 30%;
                font-size: 0.3615rem;
                display: flex;
                align-items: flex-start;
                color: #8c8c8c;
            }
        }
    }
}

.k_line_detail {
    flex-grow: 1;
    width: 100%;
    min-height: 5rem;
    max-height: 10rem;
    background: #fff;
    border-radius: 0 0 0.3rem 0.3rem;
}

.real_time_detail {
    width: 100%;
    // height: 2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.3rem 0;

    .left_now_price {
        // width: 35%;
        height: 100%;

        .top_now {
            width: 100%;
            // height: 65%;
            font-size: 0.741rem;
            display: flex;
            align-items: center;

            span {
                font-weight: 500;
            }
        }

        .bottom_now {
            width: 100%;
            // height: 35%;
            display: flex;
            padding-left: 0.1rem;
            padding-top: 0.1rem;
        }

        .tew {
            margin-left: 0.2rem;
        }
    }

    .right_ets {
        max-width: 60%;
        height: 100%;

        > div {
            width: 100%;
            padding: 0.15rem 0;
            display: flex;
            align-items: center;

            > div {
                // width: 50%;
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 0.1rem;

                .titles {
                    padding-right: 0.1rem;
                }
            }
        }
    }
}

.topes {
    span {
        display: inline-block;
        // padding-top: 0.6rem;
    }
}

.bots {
    span {
        display: inline-block;
        // padding-top: 0.2rem;
    }
}

.titles {
    color: rgb(159, 159, 159);
}

.border_bottom {
    width: 100%;
    height: 0.05rem;
    border-bottom: 0.02rem solid rgb(235, 235, 235);
    position: absolute;
    top: 3rem;
}

.priect_top_bottom {
    width: 100%;
    background: #fff;
    padding: 0.3rem 0.3rem;
    margin-top: 0.2rem;
    border-radius: 0.3rem 0.3rem 0 0;

    .t_title {
        width: 100%;
        height: 15%;
        font-size: 0.4546rem;
        margin-top: 0.2rem;

        span {
            font-weight: 800;
        }
    }

    .charts {
        width: 100%;
        height: 85%;
        display: flex;
        justify-content: space-between;
        margin-top: 0.6rem;

        > div {
            width: 49%;
            height: 100%;
        }

        .t_ma {
            width: 100%;
            height: 0.3rem;
            color: rgb(0, 0, 0);
            display: flex;
            font-size: 0.3046rem;
        }
    }
}

.ets {
    width: 100%;
    height: 0.5rem;
    display: flex;
    margin-top: 0.08rem;

    > div {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .right_sell1 {
        justify-content: flex-end;
    }

    span {
        font-weight: 600;
    }
}

.left_s {
    color: #028f52;
}

.right_h {
    color: #d50000;
}

.ob_detail {
    width: 100%;
    height: 10rem;
    background: #fff;
    margin-bottom: 1.2821rem;
    margin-top: 0.3rem;

    .ob_content {
        width: 100%;
        height: 100%;
        padding: 0 0.3rem;

        .ob_title {
            width: 100%;
            height: 1rem;
            display: flex;
            align-items: center;
            font-size: 0.5128rem;
        }

        .details {
            width: 100%;
            height: 1rem;
            display: flex;
            font-size: 0.3846rem;

            .left_details {
                width: 40%;
                height: 100%;
                display: flex;
                align-items: center;
            }

            .right_details {
                width: 60%;
                height: 100%;
                display: flex;
                justify-content: flex-end;
                align-items: center;
            }
        }
    }
}

.btns {
    width: 100%;
    height: 1.7rem;
    position: fixed;
    bottom: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    .lefts {
        width: 25%;
        height: 70%;
        display: flex;
        align-items: center;

        > div {
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 0.6rem;
                height: 0.6rem;
            }
        }
    }

    .rights {
        width: 70%;
        height: 70%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        > div {
            border-radius: 0.15rem;
        }

        .buy_btn {
            width: 45%;
            height: 100%;
            background: rgb(225, 59, 69);
            color: #fff;

            .top_buy {
                width: 100%;
                height: 45%;
                display: flex;
                justify-content: center;
                align-items: flex-end;
            }

            .bottom_buy {
                width: 100%;
                height: 55%;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                font-size: 0.4015rem;
                padding: 0.1rem 0 0 0;
            }
        }

        .sell_btn {
            width: 45%;
            height: 100%;
            background: rgb(68, 155, 84);
            color: #fff;

            .top_sell {
                width: 100%;
                height: 45%;
                display: flex;
                justify-content: center;
                align-items: flex-end;
            }

            .bottom_sell {
                width: 100%;
                height: 55%;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                padding: 0.1rem 0 0 0;
                font-size: 0.4015rem;
            }
        }
    }
}

.jianjie {
    width: 100%;
    // height: 5rem;
    background: rgb(255, 255, 255);
    margin-top: 0.2rem;
    border-radius: 0.3rem;
    margin-bottom: 0.3rem;
    padding: 0.4rem 0.3rem;

    .top_jj {
        width: 100%;
        height: 1.3rem;
        display: flex;
        align-items: center;
        font-size: 0.4546rem;

        span {
            font-weight: 800;
        }
    }

    .jet {
        width: 100%;

        span {
            line-height: 0.5rem;
        }
    }
}

@-webkit-keyframes zy {
    10% {
        transform: rotate(15deg);
    }

    20% {
        transform: rotate(-10deg);
    }

    30% {
        transform: rotate(5deg);
    }

    40% {
        transform: rotate(-5deg);
    }

    50%,
    100% {
        transform: rotate(0deg);
    }
}

.isjj {
    animation: zy 2.5s .15s linear infinite;
    animation: zy 2.5s .15s linear infinite;
    animation: zy 2.5s .15s linear infinite;
    animation: zy 2.5s .15s linear infinite;
    animation: zy 2.5s 0.15s linear infinite;
    animation: zy 2.5s 0.15s linear infinite;
    animation: zy 2.5s 0.15s linear infinite;
    animation: zy 2.5s 0.15s linear infinite;
}

.content_money {
    width: 80%;
    height: 80%;
}

.sanjiao {
    width: 0.4rem;
    height: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        width: 0.4rem;
        height: 0.4rem;
    }
}

.top_price {
    width: 100%;
    height: 100%;
    display: flex;
    padding-top: 0.12rem;
    flex-direction: column;
    align-items: end;
    justify-content: flex-end;

    .left {
        // width: 0.8rem;
        height: 0.4rem;
        border-radius: 0.1rem;

        .closed {
            background: #4d73b1;
        }

        .text {
            padding: 0.1rem;
            border-radius: 0.1rem;
        }

        color: #fff;
        font-size: 0.32rem;
        display: flex;
        align-items: center;
        justify-content: center;

        .open {
            background-image: linear-gradient(to right, #f68a4a, #eb4d32);
        }

        span {
            display: inline-block;
            transform: scale(0.8);
            font-weight: 400;
        }
    }

    .right {
        padding-top: 0.15rem;
        width: auto;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        white-space: nowrap;
        margin-left: 0.1rem;
        margin-right: 0.1rem;
        min-width: 1.9rem;
        font-size: 0.23rem;
        color: #959595;

        span {
            font-weight: 400;
            text-align: right;
        }
    }
}

.bottom_balance {
    width: 100%;
    height: 30%;
    display: flex;
    justify-content: flex-end;
    font-size: 0.3077rem;
    color: #acaeaf;
    transform: scale(0.9);
    margin-left: 0.2rem;
    padding-right: 0.68rem;
}

/deep/ .mint-popup {
    &.popup-bottom-enter-active, &.popup-bottom-leave-active {
        transition: transform 250ms; // 修改为你想要的时长
    }

    &.popup-bottom-enter, &.popup-bottom-leave-to {
        transform: translateY(100%);
    }
}
</style>
